<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for 循环</title>
    <!-- 引入vue 包-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in list" :key="">{{item}}</li>
        </ul>
        <div>my name is {{ person.name}} {{person.age}}岁</div>
        <ol>
            <li v-for="item in list1"> {{item.name}}今年{{item.age}}岁</li>
        </ol>
        <p v-for="(obj, key,index) in person"> {{obj}} ----{{index}} --- {{key}} </p>
        <!-- <img v-bind: src="url" alt="">
        <img :src="url" alt=""> -->
    </div>
    <script>
        var vue = new Vue({
            el:'#app',
            data:{
                list:[
                    '苹果','橘子','香蕉','橙子','西瓜'
                ],
                list1:[
                {name:'lucy',age:20},
                {name:'lili',age:14}
                ],
                person:{
                    name:'Alice',
                    age:13
                },
                url:'https://cn.vuejs.org/'
            }
        })
    </script>
</body>
</html>